<template>
    <div>
        <div style="margin-bottom: 5px">
            <el-input v-model="inputName" placeholder="please input name" style="width: 200px" suffix-icon="el-icon-search"
                      @keyup.enter.native="loadPost">
            </el-input>
            <el-select v-model="selectSex" filterable placeholder="please select gender" style="margin-left: 7px">
                <el-option
                        v-for="item in sexs"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="success" style="margin-left: 7px" @click="loadPost">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>

        </div>

        <el-table :data="tableData" :stripe="stripeTrue" :border="borderTrue"
                  :header-cell-style="{background:'rgba(209,209,245,0.28)'}"
                  highlight-current-row
                  @current-change="selectGoodsCurrentChange">

            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="age" label="年龄">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.sex === 1 ? 'primary' : 'danger'"
                            disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号码">
            </el-table-column>
            <el-table-column prop="roleId" label="角色">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'success' : 'primary')"
                            disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '用户')}}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top: 5px; text-align: center"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageNum"
                       :page-sizes="[7, 10, 15,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>

    </div>

</template>

<script>
    export default {
        name: "SelectUser",
        data() {

            return {
                tableData: [],
                stripeTrue:true,
                borderTrue:true,
                pageSize: 10,
                pageNum: 1,
                total:0,
                inputName:'',
                selectSex:'',
                sexs:[
                    {
                        value: '1',
                        label: '男'
                    },{
                        value: '0',
                        label: '女'
                    }
                ],

                addOrUpdate:String,

                centerDialogVisible:false,

                form:{
                    name: '',
                    no:'',
                    password:'',
                    age:'',
                    sex:'',
                    roleId:'2',
                    phone:''
                }

            }
        },
        methods:{

            selectGoodsCurrentChange(val) {
                this.$emit("doSelectUser",val)
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1;
                this.pageSize = val;
                this.loadPost();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.loadPost();
            },

            reset(){
                this.inputName='';
                this.selectStorage='';
                this.selectGoodstype='';

                this.loadPost()
            },

            loadPost(){
                this.$axios.post(this.$httpUrl + '/user/diyListPage',{
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,

                    param:{
                        name: this.inputName,
                        sex:this.selectSex,
                        roleId: '2'
                    }

                }).then(res=>res.data).then(res=>{
                    console.log(res);

                    if (res.code==200){
                        this.tableData = res.data
                        this.total = res.total
                    }else{
                        this.$message.error("获数据失败！")
                    }

                })
            }
        },
        beforeMount() {
            this.loadPost();
        }
    }
</script>

<style scoped>
    .el-table-column{
        text-align: center;
        margin: auto;
    }
</style>